<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Fancytree - Example: Drag'n'drop</title>
	<script src="../lib/jquery.js"></script>

	<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
	<script src="../src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
	<script src="../src/jquery.fancytree.js"></script>
	<script src="../src/jquery.fancytree.dnd5.js"></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="../lib/prettify.css" rel="stylesheet">
	<script src="../lib/prettify.js"></script>
	<link href="sample.css" rel="stylesheet">
	<script src="sample.js"></script>
	<!-- End_Exclude -->

<style type="text/css">
	span.drag-source {
		border: 1px solid grey;
		border-radius: 3px;
		padding: 2px;
		background-color: silver
	}

	ul.fancytree-container {
		max-height: 200px;
		overflow-y: scroll;
	}

	span.fancytree-node.fancytree-drag-source {
		outline: 1px dotted grey;
	}
/*
	span.fancytree-node.fancytree-drag-source.fancytree-drag-remove {
		opacity: 0.4;
	}
	span.fancytree-node.fancytree-drop-over {
		outline: 1px solid gray;
	}
*/
	span.fancytree-node.fancytree-drop-accept {
		outline: 1px dotted green;
	}
	span.fancytree-node.fancytree-drop-reject {
		outline: 1px dotted red;
	}

</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
	$(function(){
		// Attach the fancytree widget to an existing <div id="tree"> element
		// and pass the tree options as an argument to the fancytree() function:
		$("#tree").fancytree({
			extensions: ["dnd5"],
			// titlesTabbable: true,
			source: {
				url: "ajax-tree-fs.json"
			},
			dnd5: {
				// autoExpandMS: 400,
				// preventForeignNodes: true,
				// preventNonNodes: true,
				// preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
				// preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
				// scroll: true,
				// scrollSpeed: 7,
				// scrollSensitivity: 10,

				// --- Drag-support:

				dragStart: function(node, data) {
					/* This function MUST be defined to enable dragging for the tree.
					 *
					 * Return false to cancel dragging of node.
					 * data.dataTransfer.setData() and .setDragImage() is available
					 * here.
					 */
//					data.dataTransfer.setDragImage($("<div>hurz</div>").appendTo("body")[0], -10, -10);
					return true;
				},
				dragDrag: function(node, data) {
					data.dataTransfer.dropEffect = "move";
				},
				dragEnd: function(node, data) {
				},

				// --- Drop-support:

				dragEnter: function(node, data) {
					// node.debug("dragEnter", data);
					data.dataTransfer.dropEffect = "move";
					// data.dataTransfer.effectAllowed = "copy";
					return true;
				},
				dragOver: function(node, data) {
					data.dataTransfer.dropEffect = "move";
					// data.dataTransfer.effectAllowed = "copy";
				},
				dragLeave: function(node, data) {
				},
				dragDrop: function(node, data) {
					/* This function MUST be defined to enable dropping of items on
					 * the tree.
					 */
					var transfer = data.dataTransfer;

					node.debug("drop", data);

					// alert("Drop on " + node + ":\n"
					// 	+ "source:" + JSON.stringify(data.otherNodeData) + "\n"
					// 	+ "hitMode:" + data.hitMode
					// 	+ ", dropEffect:" + transfer.dropEffect
					// 	+ ", effectAllowed:" + transfer.effectAllowed);

					if( data.otherNode ) {
						// Drop another Fancytree node from same frame
						// (maybe from another tree however)
						var sameTree = (data.otherNode.tree === data.tree);

						data.otherNode.moveTo(node, data.hitMode);
					} else if( data.otherNodeData ) {
						// Drop Fancytree node from different frame or window, so we only have
						// JSON representation available
						node.addChild(data.otherNodeData, data.hitMode);
					} else {
						// Drop a non-node
						node.addNode({
							title: transfer.getData("text")
						}, data.hitMode);
					}
					node.setExpanded();
				}
			},
			activate: function(event, data) {
//				alert("activate " + data.node);
			},
			lazyLoad: function(event, data) {
				data.result = {url: "ajax-sub2.json"}
			}
		});
	});
</script>
</head>
<body class="example">
	<h1>Example: 'dnd5' extension</h1>
	<div class="description">
		<p>
			Native Drag-and-Drop support:
		</p>
		<ul>
			<li>Support drag and drop of tree nodes (inside the same or between
				different trees).</li>
			<li>Support drag and drop between different frames, browser tabs,
				windows, or desktop.</li>
			<li>Requires IE 11 or later.</li>
		</ul>
		<p>
			<b>Status:</b> experimental.
			<b>Details:</b>
			<a href="https://github.com/mar10/fancytree/wiki/ExtDnd5"
				target="_blank" class="external">ext-dnd5</a>.
		</p>
	</div>

	<div>
		<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
	</div>

	<p>
		<span class="drag-source" draggable="true"
			ondragstart="event.dataTransfer.setData('text/plain', 'Drag me');">
			Drag me</span>
		<br>
		<label>Drop here:
			<input type="text" class="drag-taget" placeholder="Drop here">
		</label>
	</p>
	<!-- Add a <table> element where the tree should appear: -->
	<div id="tree">
	</div>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="index.html">Example Browser</a>
		<a href="#" id="codeExample">View source code</a>
	</p>
	<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
	<!-- End_Exclude -->
</body>
</html>
